<template>
  <div style="width: 1160px;margin: 0 auto">
    <video-player
      class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="true"
      :options="playerOptions"
    ></video-player>
    <mchat
      ref="mchat"
      :config="config"
      :chats="chats"
      :mine="mine"
      @chatEvent="handleChatEvent"
      @talkEvent="talkEvent"
      @sendMessage="sendMessage"
      @loadHistory="handleHistory"
      @uploadEvent="handleUpload"
    >
      <mchat-right-box>
        <template slot-scope="props">
          <mchat-group-list
            v-if="props.chat.type == 'group'"
            :notices="props.chat.notices"
            :userList="props.chat.userList"
            :filter-user-method="filterUser"
            @click="handleRightEvent"
          ></mchat-group-list>
          <div v-else>发挥你的想象</div>
        </template>
      </mchat-right-box>
    </mchat>
  </div>
</template>
<script>
  import im from '../../api/im'
  import live from '../../api/live'

  const obj = {
    type: 'rmtp/mp4',
    src: ''
  };
  export default {
    data() {
      return {
        // 直播信息开始
        playerOptions: {
          // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: "zh-CN",
          aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          techOrder: ['flash', 'html5'],     // 兼容顺序
          sources: [obj],
          // sources: [{
          //   type: 'rmtp/mp4',
          //   // src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
          //   // src: 'rtmp://58.200.131.2:1935/livetv/cctv1'
          //   src: "rtmp://127.0.0.1/oflaDemo/153275218524246016"
          // }],
          poster: "", //你的封面地址 从上个页面中传入
          // width: document.documentElement.clientWidth, //播放器宽度
          notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true, //全屏按钮
          }
        },
        // 视频播放信息结束

        // im信息定义开始
        //获取主面板列表信息，下文会做进一步介绍
        config: {
          // 是否有下拉按钮
          downBtn: true,
          rightBox: true,
          // 简约模式
          brief: true,
          // 是否开启桌面消息提醒，即在浏览器之外的提醒
          notice: false,
          // 设定
          voice: true,
          //上传文件的扩展名
          fileExt: "",
          tabRemove: false,
          fixed: false,
        },
        //我的信息
        mine: {},
        //会话
        // chats: chats,
        chats: [],
        courseId: '',
        // 历史记录查询条件
        HistoryMessageQuery: {
          fromId: "",
          messageSize: 0,
          toId: "",
          type: "",
        },
        history: []
        // im信息定义结束
      }
    },
    methods: {
      // 查询会话列表
      getGroupsByUserId() {
        im.getGroupsByUserId(this.courseId).then(response => {
          this.chats = response.data.data.chatVoArrayList
        })
      },
      // 根据id获取用户
      getMineById() {
        im.getMineById().then(response => {
          this.mine = response.data.data.mine
          this.mine.username = this.mine.name
        })
      },
      // 发送消息
      saveMessage(message) {
        // message.id = null;
        im.saveMessage(message).then(response => {
          // console.log(response.data)
          // 界面更新消息
          this.$refs.mchat.getMessage(message);
        }).catch(error => {

        })
      },
      filterUser(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      fetchNotices() {
        let list = CONST.notice_list;
        return list;
      },
      handleChatEvent(event, data) {
        console.log("窗口事件", {event, data})
        let channels = this.chats;
        let len = channels.length;
        if (len < 1) return;
        let ary = [];
        switch (event) {
          case "removeChat":
            for (let i = 0; i < len; i++) {
              let model = channels[i];
              if (model.id != data.id) {
                ary.push(model);
              }
            }
            this.chats = ary;
            break;
        }
      },
      handleRightEvent(event) {
        console.log("右边框事件", event);
      },
      handleHistory(data) {
        const {chat, last, callback} = data;
        this.HistoryMessageQuery.fromId = this.mine.id
        this.HistoryMessageQuery.toId = data.chat.id
        this.HistoryMessageQuery.type = data.chat.type
        // 获取历史记录
        im.getHistoryMessage(this.HistoryMessageQuery).then(response => {
          let messages = response.data.data.messages
          // 如果获取的历史记录中了新的消息记录，则更新历史记录
          if (messages.length > chat.messageSize) {
            this.history = messages.slice(chat.messageSize)
            chat.messageSize = messages.length
          }
          callback(this.history);
        })
      },
      talkEvent(event, data) {
        console.log("谈话内容", {event, data});
      },
      sendMessage(data) {
        console.log("发送内容", {data});
        const {mine, to, content, timestamp} = data;
        let message = {
          //消息来源用户名
          username: mine.username,
          //消息来源用户头像
          avatar: mine.avatar,
          //消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
          id: to.id,
          //聊天窗口来源类型，从发送消息传递的to里面获取
          type: to.type,
          //消息内容
          content,
          //消息id，可不传。除非你要对消息进行一些操作（如撤回）
          toid: to.id,
          //是否我发送的消息，如果为true，则会显示在右方
          mine: true,
          //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
          fromid: mine.id,
          //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
          timestamp,
        };
        // 发送消息
        this.saveMessage(message)

        //自动回复
        // let authReplay = {
        //   username: "july-meteor",
        //   avatar: require("../../public/avatar/heiqi.png"),
        //   id: to.id,
        //   type: to.type,
        //   content: replay[(Math.random() * 9) | 0],
        //   cid: 0,
        //   mine: false,
        //   fromid: -1,
        //   timestamp: new Date(),
        // };
        // this.$im.emit("getMessage", authReplay);
      },
      handleDelChat() {
        this.chats.pop();
      },
      handleUpload(data, fn) {
        console.log("文件上传", data)

      },
      // 根据课程id获取课程直播地址
      getLive() {

      }
    },
    created() {
      this.courseId = this.$route.params.id;
      this.getGroupsByUserId()
      this.getMineById()

    },
    beforeCreate() {
      this.courseId = this.$route.params.id;
      live.getLiveByCourseId(this.courseId).then(response => {
        obj.src = response.data.data.lives.rmtp
        console.log(obj)
      })
    },
  }
</script>
<style scoped>
  .video-box {
    width: 1000px;
    padding: 20px;
  }
</style>
